<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css"/>
    <style>
        .orderColor{
            color:red;
        }
    </style>
</head>
<body>
<div ng-app="product">

    <div class="container" ng-controller="productController">
        <nav class="navbar navbar-default" role="navigation">

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" ng-model="search.id" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div>
        </nav>
        <table class="table">
            <thead>
            <tr>
                <th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">
                    产品编号
                    <span ng-class="{orderColor:orderType === 'id'}" class="caret"></span>
                </th>
                <th ng-click="changeOrder('name')" ng-class="{dropup:order === ''}">
                    产品名称
                    <span ng-class="{orderColor:orderType === 'name'}" class="caret"></span>
                </th>
                <th ng-click="changeOrder('price')" ng-class="{dropup:order === ''}">
                    产品价钱
                    <span ng-class="{orderColor:orderType === 'price'}" class="caret"></span>
                </th>
            </tr>
            </thead>
            <tbody>
            <!--filter:{id:search}-->
            <tr ng-repeat="product in productData | filter:search | orderBy:order + orderType">
                <td>
                    {{product.id}}
                </td>
                <td>
                    {{product.name}}
                </td>
                <td>
                    {{product.price | currency : '(RMB)'}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>